<template>
  <v-autocomplete :items="people"
                  :loading="loading"
                  :search-input.sync="search"
                  chips
                  color="blue-grey lighten-2"
                  filled
                  item-text="staffName_Id"
                  item-value="staffInfo"
                  label="Select"
                  multiple
                  v-model="friends">
    <template v-slot:selection="data">
      <v-chip :input-value="data.selected"
              @click="data.select"
              @click:close="remove(data.item)"
              close>
        <v-avatar left>
          <v-img :src="data.item.avatar"></v-img>
        </v-avatar>
        {{ data.item.staffName }}
      </v-chip>
    </template>
    <template v-slot:item="data">
      <template>
        <v-list-item-avatar>
          <img :src="data.item.avatar">
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title v-html="data.item.staffName"></v-list-item-title>
          <v-list-item-subtitle v-html="data.item.staffId"></v-list-item-subtitle>
        </v-list-item-content>
      </template>
    </template>
  </v-autocomplete>
</template>

<script>
  import {GetStaffBank} from '@/request'

  export default {
    name: "PeoplePickerOnDB",
    props: {
      'TravelAllowanceId': String
    },
    data: () => ({
      loading: false,
      autoUpdate: true,
      friends: [],
      people: [],
      staffList: [],
      search: null,
      captchaInputLastTime: null,
    }), methods: {
      remove(item) {
        const index = this.friends.indexOf(item.staffInfo)
        if (index >= 0) this.friends.splice(index, 1)
      },
      async GetStaffList(val) {
        var currentList = [];
        var currentStaffId = [];
        this.friends.forEach(x => currentStaffId.push(x.staffId))
        this.people.forEach(x => {
          if (currentStaffId.indexOf(x.staffId) > -1) {
            currentList.push(x);
          }
        })
        var searchModel = {};
        searchModel.staffId = val;
        searchModel.travelAllowanceId = this.TravelAllowanceId;
        await GetStaffBank(searchModel).then(res => {
          res.data.forEach(f => {
            if (currentStaffId.length > 0) {
              if (currentStaffId.indexOf(f.staffId) == -1) {
                f.avatar = 'https://vcontacts.asia.pwcinternal.com/ImageWebApi/api/Image/' + f.staffId.trim() + '?type=1'
                currentList.push(f);
              }
            } else {
              f.avatar = 'https://vcontacts.asia.pwcinternal.com/ImageWebApi/api/Image/' + f.staffId.trim() + '?type=1'
              currentList.push(f);
            }


          })
          console.log(currentList);
          if (this.people.length > 0) {
            this.people = currentList
          } else
            this.people = res.data;


        })
      }, sleep(ms = 1000) {
        return new Promise((resolve) => setTimeout(resolve, ms));
      },

    },

    computed: {},
    watch: {
      friends() {
        this.$emit('eventPeoplePicker', this.friends);
        this.search = null;
      },
      async search(val) {
        this.loading = true;
        var delay = 600;
        this.captchaInputLastTime = (new Date()).valueOf();
        await this.sleep(delay);
        var nowTime = (new Date()).valueOf();
        var gap = nowTime - this.captchaInputLastTime;
        if (gap < delay) {
          this.loading = false;
          return
        }
        this.GetStaffList(val)
        this.loading = false;
      },
    },
    created() {
      // this.GetStaffList()
    },
  }
</script>

<style scoped>
</style>
